<template>
    <div class="score-overview">
      <div class="rank-change anchor-offset" id="High-frequency-incorrect-questions">
         <h3 class="header-with-select" style="margin-top:0;">年级五率对比</h3>
        <el-table :data="gradefiveratelist" border 
        stripe
        :header-cell-style="{ background: '#e8f0fa', color: '#2A303B',fontWeight:'500' }"
        class="custom-table"
        tooltip-effect="dark"
        style="width: 100%">
          <el-table-column prop="name" label="年级/班级 " align="center"/>
          <el-table-column label="满分率" align="center">
            <el-table-column prop="name" label="人次 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.fullScoreRate.people }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="占比 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.fullScoreRate.rate }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="优秀率" align="center">
            <el-table-column prop="name" label="人次 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.excellenceRate.people }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="占比 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.excellenceRate.rate }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="良好率" align="center">
            <el-table-column prop="name" label="人次 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.goodRate.people }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="占比 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.goodRate.rate }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="及格率" align="center">
            <el-table-column prop="name" label="人次 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.passRate.people }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="占比 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.passRate.rate }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="低分率" align="center">
            <el-table-column prop="name" label="人次 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.lowScoreRate.people }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="占比 " align="center">
              <template slot-scope="scope">
                  {{ scope.row.lowScoreRate.rate }}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div class="rank-change anchor-offset" id="Homework-score">
         <h3 class="header-with-select">作业提交情况对比</h3>
         <el-table 
          :data="homeworksavelist" 
          border 
          stripe
          :header-cell-style="{ background: '#e8f0fa', color: '#2A303B', fontWeight: '500' }"
          class="custom-table"
          tooltip-effect="dark"
          style="width: 100%">
          
          <!-- 固定列：年级/班级 -->
          <el-table-column 
            prop="name" 
            label="年级/班级" 
            align="center" 
            fixed="left" />
          
          <!-- 动态列：每个考试时间的提交率 -->
          <el-table-column 
            v-for="(exam, index) in examList" 
            :key="exam.examTime"
            :label="exam.examTime" 
            align="center">
            <template #default="{ row }">
              {{ getSubmitRate(row, exam.examTime) }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="rank-change" id="fluctuate-student">
         <h3 class="header-with-select">作业空白情况对比</h3>
        <el-table :data="rankChangeData" border v-loading="loadingRankChange"
        stripe
        :header-cell-style="{ background: '#e8f0fa', color: '#2A303B',fontWeight:'500' }"
        class="custom-table"
        tooltip-effect="dark"
        style="width: 100%">
          <el-table-column prop="name" label="年级/班级 " align="center"/>
          <el-table-column prop="name" label="2024年12月16日 " align="center"/>
          <el-table-column prop="name" label="2024年12月16日 " align="center"/>
          <el-table-column prop="name" label="2024年12月16日 " align="center"/>
          <el-table-column prop="name" label="2024年12月16日 " align="center"/>
          <el-table-column prop="name" label="2024年12月16日 " align="center"/>
        </el-table>
      </div> -->
    </div>
  </template>
  
  <script>
  import { gradefiverateDate,homeworksaveDate } from '@/api/grade'
  
  export default {
    name: 'ScoreOverview',
    data() {
      return {
        gradefiveratelist:[],
        subjectId:0,
        gradeId:0,
        classIds:[],
        startTime:'',
        endTime:'',
        homeworksavelist:[]
      }
    },
    mounted() {
      this.subjectId = Number(this.$route.query.subjectid) || 0
      this.gradeId = Number(this.$route.query.gradeid) || 0
      this.classIds1 = (this.$route.query.classids || '').split(',').map(Number)
      this.classIds = this.$route.query.classids || ''
      this.startTime = this.$route.query.startTime || ''
      this.endTime = this.$route.query.endTime || ''
      this.gradefiverateapi() // 年级五率对比
      this.homeworkdataapi() // 作业提交情况
    },
    methods: {
      // 年级五率对比S
      async gradefiverateapi() {
        // console.info('this.gradeId',this.gradeId)
        // return false
        try {
          const res = await gradefiverateDate(
            Number(this.subjectId),
            Number(this.gradeId), 
            this.classIds1,
            String(this.startTime),
            String(this.endTime)
          )
          // console.log('res 是否是 Promise:', res); // 应该是 false
          if (res.code === 200) {
            this.gradefiveratelist = res.data
          } else {
            throw new Error(res.message)
          }
        } catch (error) {
          console.error('加载成绩概览失败:', error)
          throw error  // 向上传递错误，让 loadData 统一处理
        }
      },
      //作业提交情况
    async homeworkdataapi() {
        try {
          const res = await homeworksaveDate(
            Number(this.subjectId),
            Number(this.gradeId), 
            String(this.classIds),
            String(this.startTime),
            String(this.endTime)
          )
          // console.log('res 是否是 Promise:', res); // 应该是 false
          if (res.code === 200) {
            this.homeworksavelist = res.data
          } else {
            throw new Error(res.message)
          }
        } catch (error) {
          console.error('加载成绩概览失败:', error)
          throw error  // 向上传递错误，让 loadData 统一处理
        }
      },
        // 根据考试时间获取对应提交率
      getSubmitRate(row, examTime) {
        const exam = row.submitStatisticsDTOList.find(item => item.examTime === examTime);
        return exam ? exam.submitRate : '-';
      }
    },
    computed: {
      // 提取所有考试时间（去重）
      examList() {
        if (!this.homeworksavelist.length) return [];
        const exams = new Map();
        this.homeworksavelist[0].submitStatisticsDTOList.forEach(item => {
          exams.set(item.examTime, item);
        });
        return Array.from(exams.values());
      }
    },
  
    // beforeDestroy() {
    //   if (this.boxPlotChart) {
    //     this.boxPlotChart.dispose()
    //   }
    // }
  }
  </script>
  
  <style scoped>
  .score-overview{
      background: #FFFFFF;
      box-shadow: 0 12px 16px 0 #5572921a;
      border-radius:10px;
      padding:24px;
  }
  .query-section {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .query-form {
    display: flex;
    align-items: center;
  }
  
  .overview-section,
  .score-details,
  .score-analysis,
  .rank-change,
  .error-questions {
    background: #fff;
    border-radius: 4px;
  }
  
  .overview-content {
      box-sizing: border-box;
    background: #295cff0a;
    border: 1px solid #295cff33;
    border-radius: 10px;
    padding:18px 24px 0;
    font-size:14px;
  }
  
  .submit-info {
    margin-bottom: 16px;
    line-height: 1.8;
    color:#8E96A4
  }
  .submit-info span{
      color:#295CFF
  }
  .submit-info i{
      color:#5B6371;
      font-style: normal;
  }
  .submit-info b{
      font-style:normal;
      font-weight: normal;
  }
  .class-info {
    margin-top: 8px;
    text-indent: 2em;
    line-height: 1.8;
  }
  .score-row {
    display: flex;
    gap: 16px;
    justify-content: center;
  }
  .score-item {
    min-width: 40px;
    text-align: center;
  }
  .question-numbers {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 8px;
    font-size: 12px;
  }
  .question-numbers span {
    min-width: 40px;
    text-align: center;
  }
  .rank-change {
    background: #fff;
    border-radius: 4px;
  }
  .change-info {
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  .change-info .el-tag {
    min-width: 80px;
  }
  .error-questions {
    background: #fff;
    border-radius: 4px;
  }
  .el-tag {
    width: 80px;
    text-align: center;
  }
  .analysis-content {
    margin-top: 16px;
    line-height: 1.8;
  }
  .header-with-select{
      font-size:16px;
      color:#2A303B;
      margin-bottom:14px;
      margin-top:24px;
  }
  .custom-table {
    width: 100%;
    border: 1px solid rgba(216,228,240,1);
    border-radius:10px;
    border-right: none;
    border-bottom:none;
  }
  
  /* 自定义表格内部元素的样式 */
  .custom-table >>> .el-table__header-wrapper th {
    background-color: rgb(232, 240, 250);
    height:42px;
    padding:0;
    text-align: center;
    font-weight:normal
  }
  .custom-table >>> .el-table__row td {
    height:42px;
    padding:0;
    text-align: center;
    border-bottom:none;
    border-right:solid 1px rgba(216,228,240,1);
  }
  .el-table .warning-row {
      background: #ffffff;
   }
  .el-table .success-row {
      background: #D8E4F0;
  }
  .anchor-offset {
    scroll-margin-top: 50px;
  }
  </style> 